<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common/common.css">
</head>

<body>
    <div class="main">
        <div class="top flex_x start">
            <img class="icons" src="./image/6.png" alt="">
            <div class="list flex_x around">
                <div class=" item ">
                    Home
                </div>
                <div class="item ">
                    About
                </div>
                <div class="item active pos_r">
                    <span class="line  line1 pos_a"></span>
                    <span class="p012">Gallery</span>
                    <span class="line line2 pos_a"></span>
                </div>
                <div class="item">Contact</div>
            </div>

        </div>
        <div class="content">
            <div class="info1 font_blod">
                Thank you for your Booking!
            </div>
            <div class="info_btn"><a style="color: #183466;" href="./contact.html">Back</a></div>
        </div>
    </div>
</body>
<style>
     .info1 {
        font-family: 'cat', sans-serif;

    }
    @media (max-width: 500px){
        .main {
        padding: 12px;
        box-sizing: border-box;
        background-color: #183466;
        width: 100vw;
        height: 100vh;
    }

    .main .icons {
        width: 60px;
        height: 60px;
        border-radius: 50px;
    }

    .list {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
    }

    .item {
        padding: 0 4px;
    }

    .line {
        display: inline-block;
        width: 4px;
        height: 50px;
        background-color: #fff;
    }

    .p012 {
        padding: 0 12px;
    }

    .line1 {
        top: -14px;
    }

    .line2 {
        top: 14px;
    }

    .info1 {
        color: #fff;
        margin-top: 120px;
        font-size: 32px;
        text-align: center;
    }

    .info_btn {
        width: 120px;
        padding: 0px 12px;
        box-sizing: border-box;
        text-align: center;
        height: 50px;
        line-height: 50px;
        align-items: center;
        font-size: 32px;
        background-color: #eff5fd;
        border-radius: 8px;
        color: #193365;
        font-weight: bold;
        margin: 40px auto;
    }
    }
    @media (min-width: 501px){
        .main {
        padding: 48px;
        box-sizing: border-box;
        background-color: #183466;
        width: 100vw;
        height: 100vh;
    }

    .main .icons {
        width: 80px;
        height: 80px;
        border-radius: 50px;
    }

    .list {
        color: #fff;
        font-weight: bold;
        font-size: 32px;
        width: 60vw;
    }

    .item {
        padding: 0 12px;
    }

    .line {
        display: inline-block;
        width: 4px;
        height: 50px;
        background-color: #fff;
    }

    .p012 {
        padding: 0 12px;
    }

    .line1 {
        top: -14px;
    }

    .line2 {
        top: 14px;
    }

    .info1 {
        color: #fff;
        margin-top: 120px;
        font-size: 32px;
        text-align: center;
    }

    .info_btn {
        width: 120px;
        padding: 0px 12px;
        box-sizing: border-box;
        text-align: center;
        height: 50px;
        line-height: 50px;
        align-items: center;
        font-size: 32px;
        background-color: #eff5fd;
        border-radius: 8px;
        color: #193365;
        font-weight: bold;
        margin: 40px auto;
    }
    }
   
</style>

</html>